<template>
  <view>
    <!-- pages/mdsyindex/mdsyindex.wxml -->
    <navigator url="/packageA/mdsyindex/mdsyindex" class="qiehuanmendian">
      <view>切换门店</view>
    </navigator>
    <!-- 轮播图 -->

    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" :circular="true" class="swiper">
      <block v-for="(item, index) in images" :key="index">
        <swiper-item>
          <view class="slide-image" :style="'background-image: url(' + item.url + ');'">
            <view class="fuwukuang">
              <view class="fuwu_kk" v-for="(ss, index1) in sheshi" :key="index1">
                <view>{{ ss.name }}</view>
              </view>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
    <!-- 公告 -->
    <view class="gg">
      <image src="/static/pages/img/喇叭.png" class="gg_tp"></image>
      <text>{{ gg.gg }}</text>
    </view>

    <view class="ge1"></view>
    <!-- 信息 -->
    <view class="xx">
      <view class="hang1">
        <!-- 第一行 -->
        <h1 class="xx_h1">{{ gg.name }}</h1>
        <view class="xx_h1_dw" @tap="playphone(tel)">
          <image class="xx_tp" src="/static/pages/img/电话2.png"></image>
          <text class="xx_text">电话</text>
        </view>
      </view>

      <view class="hang2">
        <!-- 第二行 -->
        <text class="xx_h2_text">{{ gg.dz }}</text>
        <view class="xx_h2_dw" @tap="navigationl">
          <image class="xx_tp" src="/static/pages/img/定位.png"></image>
          <text class="xx_text">导航</text>
        </view>
      </view>

      <view class="hang3">
        <!-- 第三行 -->
        <view class="xx_text">距我{{ gg.jl }}km</view>
      </view>
    </view>

    <view class="ge2"></view>

    <!-- 四个圈 -->
    <view class="sq">
      <view class="sq_q">
        <view class="sq_no" @tap="showModalFun">
          <view class="sq_tp_k">
            <image class="sq_tp" src="/static/pages/img/联系商家.png"></image>
          </view>
          <view class="sq_text_k">
            <text class="sq_text">联系商家</text>
          </view>
        </view>

        <view class="sq_no" @tap="gokaquan('/packageB/dyyq/dyyq')">
          <view class="sq_tp_k">
            <image class="sq_tp" src="/static/pages/img/抖音-copy.png"></image>
          </view>
          <view class="sq_text_k">
            <text class="sq_text">抖音验券</text>
          </view>
        </view>

        <view class="sq_no" @tap="showModaldyFun">
          <view class="sq_tp_k">
            <image class="sq_tp" src="/static/pages/img/wifi.png"></image>
          </view>
          <view class="sq_text_k">
            <text class="sq_text">WIFI连接</text>
          </view>
        </view>

        <view class="sq_no" @tap="gokaquan('/packageA/wodekaquan/wodekaquan')">
          <view class="sq_tp_k">
            <image class="sq_tp" src="/static/pages/img/储值卡.png"></image>
          </view>
          <view class="sq_text_k">
            <text class="sq_text">储值卡</text>
          </view>
        </view>
      </view>
    </view>
    <view class="ge2"></view>
    <!-- 日期选择 -->
    <view class="xzq">
      <view @tap="yi" :class="currentIndex == 0 ? 'xzq_6' : 'xzq_5'">
        <view>{{ daydata.a.name }}</view>
        <view>{{ daydata.a.day }}</view>
      </view>

      <view @tap="er" :class="currentIndex == 1 ? 'xzq_6' : 'xzq_5'">
        <view>{{ daydata.b.name }}</view>
        <view>{{ daydata.b.day }}</view>
      </view>

      <view @tap="san" :class="currentIndex == 2 ? 'xzq_6' : 'xzq_5'">
        <view>{{ daydata.c.name }}</view>
        <view>{{ daydata.c.day }}</view>
      </view>

      <view @tap="si" :class="currentIndex == 3 ? 'xzq_6' : 'xzq_5'">
        <view>{{ daydata.d.name }}</view>
        <view>{{ daydata.d.day }}</view>
      </view>

      <view @tap="wu" :class="currentIndex == 4 ? 'xzq_6' : 'xzq_5'">
        <view>{{ daydata.e.name }}</view>
        <view>{{ daydata.e.day }}</view>
      </view>

      <picker mode="date" :start="startdate" :end="enddate" :value="date" fields="day" @change="bindDateChange"
              class="xzq_rl">
        <!-- 要预约更后面弹窗选择日期 -->
        <image class="xzq_rq" src="/static/pages/img/日历.png"></image>
        <image class="xzq_sjx" src="/static/pages/img/三角形.png"></image>
      </picker>
    </view>

    <view class="ge2"></view>

    <view class="bxqk">
      <!-- 包厢情况 -->
      <view class="lb" @click="getnavurl(bx,index)" v-for="(bx, index) in roomList" :key="index">
        <view class="bx_h1" style="order: 1">
          <!-- 第一行 -->
          <view>
            <!-- 图片 -->
            <image class="bx_hx_tp" :src="bx.cover"></image>
          </view>
          <view class="bx_h1_text">
            <!-- 里面三行文字 -->
            <view class="bx_name">{{ bx.name }}</view>
            <view class="bx_gn">{{ bx.address }}</view>
            <view class="bx_tj">推荐人数：{{ bx.peoplenum }}人</view>
          </view>

          <view v-if="bx.room_status_data.status == 1">
            <view class="bx_qk kdk">
              <!-- 包厢使用情况 -->
              <view class="bx_sj keding">
                <view class="bx_qk_sy">订</view>
              </view>

              <view>
                <view class="bx_qk_qk kongxianzhong">{{ bx.room_status_data.title }}</view>
              </view>
            </view>
          </view>
          <view v-if="bx.room_status_data.status == 2">
            <view class="bx_qk">
              <!-- 包厢使用情况 -->
              <view class="bx_sj">
                <view class="bx_qk_sy">{{ bx.room_status_data.remark }}</view>
              </view>

              <view>
                <view class="bx_qk_qk">{{ bx.room_status_data.title }}</view>
              </view>
            </view>
          </view>
          <view v-if="bx.room_status_data.status == 3">
            <view class="bx_qk" style="color: rgb(255,86,24);border:1px solid rgb(255,86,24);">
              <!-- 包厢使用情况 -->
              <view class="bx_sj" style="background-color:rgb(255,86,24);color: rgb(255,86,24);">
                <view class="bx_qk_sy">订</view>
              </view>

              <view>
                <view class="bx_qk_qk" style="color: rgb(255,86,24);">{{ bx.room_status_data.title }}</view>
              </view>
            </view>
          </view>
        </view>


        <view class="bx_h2" style="order: 2">
          <!-- 第二行 -->
          <view class="bx_ss" v-for="(bx_ss, index1) in bx.facility_servicing_list" :key="index1">
            {{ bx_ss.title }}
          </view>
        </view>

        <view class="bx_h3" style="order: 3">
          <!-- 第三行 -->
          <view class="bxh_left">
            <view class="kexuan"></view>
            <text>可选</text>
            <view class="bukexuan"></view>
            <text>不可选</text>
          </view>

          <text class="jaige">{{ bx.price }}元/{{ bx.booktime }}小时</text>
        </view>

        <view class="bx_h4">
          <!-- 第四行 -->
          <view class="bx_zt" v-for="(zt, index1) in getseetime(bx.servicing_today_time)" :key="index1">
            <view class="bx_fk bx_fk_none" v-if="zt.status == '-1'"></view>
            <view class="bx_fk bx_fk_yes" v-if="zt.status == '1'"></view>
            <view class="bx_fk bx_fk_no" v-if="zt.status == '0'"></view>

            <view style="padding-left: 3px">{{ parseInt(zt.time.slice(0, 2)) }}</view>
          </view>
        </view>

        <view class="ge3"></view>
      </view>
    </view>

    <view class="ge2"></view>

    <view class="md_js">
      <!-- 门店介绍 -->
      <view class="md_h1">门店介绍</view>
      <rich-text class="md_text" v-html="mdjs"></rich-text>
      <view class="md_h2"></view>
    </view>
    <suspend></suspend>
    <!-- 呼叫 -->
    <view class="modal-mask" v-if="showBohao">
      <view class="modal-container" @tap="preventClose">
        <!-- 弹窗内容 -->
        <view class="tc_hj1">{{ tel }}</view>
        <view class="ge3"></view>
        <view class="tc_hj2" @click="playphone(tel)">呼叫</view>
        <view class="ge2"></view>
        <view class="tc_hj2" @tap="hideModal">取消</view>
      </view>
    </view>

    <!-- 联系商家 -->
    <view class="modal-mask" v-if="showModal">
      <view class="modal-container" @tap="preventClose">
        <!-- 弹窗内容 -->
        <image class="_x" @tap="hideModal" src="/static/pages/img/x .png"></image>
        <view class="tc_h1">联系商家</view>
        <view class="tc_h2">
          <image class="tc_sjdh" src="/static/pages/img/商家电话.png"></image>
          <view class="tc_text">{{ tel }}</view>
        </view>

        <!-- 弹窗底部按钮 -->
        <view class="tc_bohao" @click="playphone(tel)">一键拨号</view>
      </view>
    </view>

    <!-- WIFI连接 -->
    <view class="modal-mask" v-if="showModaldy">
      <view class="modal-container" @tap="preventClose">
        <!-- 弹窗内容 -->
        <image class="_x" @tap="hideModal" src="/static/pages/img/x .png"></image>
        <view class="tc_h1">WIFI连接</view>

        <view class="tc_h3">
          <image class="tc_sjdh" src="/static/pages/img/WIFI (1).png"></image>
          <view class="tc_text_wifi">WIFI账号：</view>
          <view class="">{{ info.wifi_username }}</view>
        </view>
        <view class="tc_h3">
          <image class="tc_sjdh" src="/static/pages/img/钥匙.png"></image>
          <view class="tc_text_wifi">WIFI密码：</view>
          <view class="">{{ info.wifi_password }}</view>
        </view>

        <!-- 弹窗底部按钮 -->
        <view class="tc_wifi_di">
          <view class="tc_wifi" @click="conpy_wf(info.wifi_username,info.wifi_password)">复制密码</view>
          <view class="tc_wifi" @click="content_wf(info.wifi_username,info.wifi_password)">一键连接</view>
        </view>
      </view>
    </view>
    <view style="color: #c2c2c2;font-size: 12px;padding: 6px;text-align: center">本系统由集客猫云提供技术支持</view>
  </view>
</template>

<script>
import {storelist, userstoreinfo} from '../../common/api';
import moment from "moment/moment";
import {math} from "@/common/mathutils";
import Suspend from "@/components/suspend/Suspend.vue";
// pages/mdsyindex/mdsyindex.js
var app = getApp();
export default {
  components: {Suspend},
  data() {
    return {
      gg: {
        gg: '',
        name: '',
        dz: '',
        jl: ''
      },
      images: [
        {
          url: ''
        }
      ],
      sheshi: [
        {
          name: ''
        }
      ],
      mdjs: '',
      tel: '',
      roomList: [
        {
          id: 99,
          acid: 1,
          store_id: 17,
          type: 1,
          category_id: null,
          tags: null,
          area_id: 1,
          qrcode_url: '',
          wxapp_qrcode_url: '',
          name: '',
          cover: '',
          banner: '',
          facility_servicing: '',
          is_recommend: 0,
          address: '',
          lng: '',
          lat: '',
          room_status: 1,
          is_verifier: 0,
          is_network: 1,
          open_type: 1,
          book_types: '',
          limit_time: 5,
          lockid: '',
          virtual_sales: 0,
          gatelockid: '0',
          line_config: null,
          electricity_yy_config: '[]',
          status: 1,
          is_bluetooth: 0,
          is_psd_door: 0,
          store_coupon_ids: null,
          original_price: '0.00',
          price: '0.00',
          is_repeat_original_price: 0,
          member_price: '0.00',
          half_price: '0.00',
          booktime: '2.00',
          reordertime: '1.00',
          cancel_time: 10,
          ahead_time: 60,
          forward_time: 15,
          peoplenum: '1-5',
          sort: 0,
          video_url: '0',
          create_time: '2022-09-30 08:25:24',
          update_time: '2024-02-21 16:39:12',
          is_delete: 0,
          discount: '10.00',
          banner_list: [''],
          booknum: 0,
          is_book: 0,
          servicing_today_time: [
            {
              status: 1,
              time: '00:00',
              price: 15.9
            }
          ],
          room_status_data: {}
        }
      ],


      currentIndex: 0,


      bx: [
        {
          tp: '',
          name: '',
          gongneng: '',
          tuijian: '6',
          Money: '0.00',
          xs: '3'
        }
      ],


      showModal: false,

      // 控制弹窗显示状态
      showModaldy: false,

      showBohao: false,


      ss: {
        name: ''
      },

      date: '',

      bx_ss: {
        name: ''
      },

      zt: {
        status: '',
        time: ''
      }
      ,
      daydata: {
        a: {
          name: '',
          day: ''
        },
        b: {
          name: '',
          day: ''
        },
        c: {
          name: '',
          day: ''
        },
        d: {
          name: '',
          day: ''
        },
        e: {
          name: '',
          day: ''
        }
      },
      info: {},
      startdate: '',
      enddate: ''
    };
  },
  onShow() {

    this.startdate = moment().locale('zh-cn').format("YYYY-MM-DD")
    this.enddate = moment().add(7, 'day').locale('zh-cn').format("YYYY-MM-DD")
    this.gettime()
    this.yi();

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.initshow();
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.formattedTime();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  computed: {},
  methods: {
    initshow() {
      let _this = this
      uni.getLocation({ //获取当前的位置坐标
        type: 'wgs84',
        success: function (res) {
          // console.log(res)

          storelist({
            lng: res.longitude,
            lat: res.latitude
          }, (res) => {
            if (res.data.code == 0) {
              _this.storeinfo(res.data.data[0]['id'])
            }
            console.log('生命周期函数--监听页面加载', res, res.data.code);
          });
        },
        fail: (err) => {
          console.log("获取位置失败,请打开定位")
          uni.showModal({
            title: "获取位置失败,请打开定位",
            showCancel: false,
            confirmText: "前往设置",
            success: () => {
              uni.openSetting({
                success: (res) => {
                  console.log("打开设置成功", res);
                  if (res.authSetting['scope.userLocation']) {
                    console.log('成功授权userLocation')
                    _this.initshow()
                  } else {
                    console.log('用户未授权userLocation')
                    // 递归调用本函数，(函数套函数)
                    _this.initshow()
                  }
                },
                fail: (err) => {
                  console.log("打开设置失败", err)
                }
              })
            }
          })
        }
      });

    },
    storeinfo(id) {
      let _this = this
      uni.getLocation({ //获取当前的位置坐标
        type: 'wgs84',
        success: function (res) {
          // console.log(res)

          userstoreinfo(
              {
                id: id,
                lng: res.longitude,
                lat: res.latitude
              },
              (res) => {
                let image = []
                res.data.data.info.banner.forEach(item => {
                  image.push({url: item})
                })
                let sheshi = [];
                res.data.data.info.tags.forEach(item => {
                  sheshi.push({name: item.title})
                })
                let roomList = []
                res.data.data.house_list.forEach(item => {
                  roomList.push(item)
                })
                if (res.data.code == 0) {
                  _this.setData({
                    gg: {
                      gg: '营业时间：' + res.data.data.info.business_hours.start_time + ' - ' + res.data.data.info.business_hours.end_time,
                      name: res.data.data.info.name,
                      dz: res.data.data.info.address,
                      jl: res.data.data.info.distance
                    },
                    images: image,
                    sheshi: sheshi,
                    mdjs: res.data.data.info.dec,
                    tel: res.data.data.info.tel,
                    roomList: roomList,
                    info: res.data.data.info
                  });
                }
                console.log('生命周期函数--监听页面加载', res, res.data.code);
              }
          );
          // console.log('当前位置的经度：' + res.longitude);
          // console.log('当前位置的纬度：' + res.latitude);
        },
        fail: (err) => {
          // uni.showModal({
          //   title: "获取位置失败,请打开定位",
          //   confirmText: "前往设置",
          //   success: () => {
          //     uni.openSetting({
          //       success: (res) => {
          //         console.log("打开设置成功", res);
          //         if (res.authSetting['scope.userLocation']) {
          //           console.log('成功授权userLocation')
          //           that.getUserLocation()
          //         } else {
          //           console.log('用户未授权userLocation')
          //           // 递归调用本函数，(函数套函数)
          //           that.showRefuseLocationPermission()
          //         }
          //       },
          //       fail: (err) => {
          //         console.log("打开设置失败", err)
          //       }
          //     })
          //   }
          // })
        }
      });

    },
    backredd(id) {
      console.log('backredd', id)
      this.storeinfo(id)
    },
    getseetime(data) {
      let currhour = moment().format("HH")
      let new_servicing_today_hour = []
      let new_l_servicing_today_hour = []
      data.forEach(item => {
        let aindex = parseInt(item.time.slice(0, 2));
        if (currhour > aindex) {
          new_l_servicing_today_hour.push({...item, aindex: aindex})
        } else {
          new_servicing_today_hour.push({...item, aindex: aindex})
        }
      })
      new_l_servicing_today_hour.sort((a, b) => {
        return a.aindex - b.aindex
      })
      return [...new_servicing_today_hour, ...new_l_servicing_today_hour];
    },
    gokaquan(url) {
      if (app.globalData.loginstatus == 2) {
        uni.navigateTo({
          url: url
        })
      } else {
        uni.navigateTo({
          url: "/packageC/login/login"
        })
      }
    },
    navigationl() {
      let _this = this
      console.log('navigationl', this.info.lat + this.info.lng, this.info.lat, this.info.lng)
      uni.openLocation({
        name: _this.gg.name,
        address: _this.gg.dz,
        latitude: parseFloat(this.info.lat),
        longitude: parseFloat(this.info.lng),
        success: function () {
          console.log('success');
        }
      });

    },
    conpy_wf(id, pw) {
      uni.setClipboardData({
        data: pw,//要被复制的内容
        success: () => {//复制成功的回调函数
          uni.showToast({//提示
            title: '复制成功'
          })
        }
      })
    },
    content_wf(id, pw) {
      this.loading = true

      let that = this

      uni.getSystemInfo({
        success: (res) => {
          let system = ''
          if (res.platform == 'android') {
            system = parseInt(res.platform.substr(8))
          }
          if (res.platform == 'ios') {
            system = parseInt(res.platform.substr(4))
          }
          if (res.platform == 'android' && system < 6) {
            uni.showToast({
              title: '手机版本不支持',
              icon: 'none'
            })
            return
          }
          if (res.platform == 'ios' && system < 11.2) {
            uni.showToast({
              title: '手机版本不支持',
              icon: 'none'
            })
            return
          }
          //初始wifi模块
          that.start_wifi(id, pw)
        }
      })
    },
    start_wifi(id, pw) {
      let that = this
      console.log(that);
      uni.startWifi({
        success: (res) => {
          that.connected(id, pw)
        },
        fail: (error) => {
          uni.showToast({
            title: '链接失败',
            icon: 'error'
          })
          this.loading = false
        }
      })
    },

    connected(id, pw) {
      uni.connectWifi({
        SSID: id, //Wi-Fi 设备名称
        password: pw, //Wi-Fi 密码
        success: (res) => {
          uni.showToast({
            title: "链接成功",
          })
          this.loading = false
        },
        fail: (error) => {
          uni.showToast({
            title: '链接失败',
            icon: 'error',
          })
          this.loading = false
        }
      })
    },


    playphone(tel) {
      uni.makePhoneCall({
        // 手机号 这里可以直接写号码如 12345 也可以写获取号码的字段如this.mobile
        phoneNumber: tel
      });
    },
    gettime(time) {
      this.daydata = {
        a: {
          name: moment(time).isSame(moment(), "day") ? '今日' : moment(time).locale('zh-cn').format("dddd"),
          day: moment(time).locale('zh-cn').format("MM-DD")
        },
        b: {
          name: moment(time).locale('zh-cn').add(1, 'days').format("dddd"),
          day: moment(time).locale('zh-cn').add(1, 'days').format("MM-DD")
        },
        c: {
          name: moment(time).locale('zh-cn').add(2, 'days').format("dddd"),
          day: moment(time).locale('zh-cn').add(2, 'days').format("MM-DD")
        },
        d: {
          name: moment(time).locale('zh-cn').add(3, 'days').format("dddd"),
          day: moment(time).locale('zh-cn').add(3, 'days').format("MM-DD")
        },
        e: {
          name: moment(time).locale('zh-cn').add(4, 'days').format("dddd"),
          day: moment(time).locale('zh-cn').add(4, 'days').format("MM-DD")
        }
      }
    }
    ,
    getnavurl(bx, index) {
      uni.navigateTo({
        url: '/packageB/baoxiang/baoxiang?id=' + bx.id + '&date=4-24&statustxt=' + bx.room_status_data.title + '&status=' + bx.room_status_data.status
      });
    },
    preventClose: function () {
    },

    yi() {
      this.setData({
        currentIndex: 0
      });
    },

    er() {
      this.setData({
        currentIndex: 1
      });
    },

    san() {
      this.setData({
        currentIndex: 2
      });
    },

    si() {
      this.setData({
        currentIndex: 3
      });
    },

    wu() {
      this.setData({
        currentIndex: 4
      });
    },

    showModalFun: function () {
      this.setData({
        showModal: true
      });
    },

    showModaldyFun: function () {
      this.setData({
        showModaldy: true
      });
    },

    showBohaoFun: function () {
      this.setData({
        showBohao: true
      });
    },

    hideModal: function () {
      this.setData({
        showModal: false,
        showModaldy: false,
        showBohao: false
      });
    },

    hideBohao: function () {
      this.setData({
        showModal: false,
        showBohao: true
      });
    },

    /**
     *
     */
    formattedTime() {
      var that = this;
      const curTime = new Date().getHours();
      let time = '';
      let todayTime = [];
      let roomList_ = [];
      for (var oIndex in that.roomList) {
        let temp_today_time = [];
        let temp_last_time = [];
        let item = that.roomList[oIndex];
        for (var iIndex in item.servicing_today_time) {
          todayTime = that.roomList[oIndex].servicing_today_time;
          time = that.extraTime(todayTime[iIndex].time);
          todayTime[iIndex].time = time;
          if (time >= curTime) {
            temp_today_time.push(todayTime[iIndex]);
          } else {
            temp_last_time.push(todayTime[iIndex]);
          }
        }
        temp_last_time.push({
          time: curTime,
          status: '-1'
        });
        item.servicing_today_time = temp_today_time.concat(temp_last_time);
        roomList_.push(item);
      }
      this.setData({
        roomList: roomList_
      });
    },

    extraTime(time) {
      return parseInt(time.split(':')[0]);
    },

    bindDateChange() {
      console.log('占位：函数 bindDateChange 未声明');
    }
  }
};
</script>
<style>
.qiehuanmendian {
  position: fixed;
  background-color: rgb(111, 111, 112);
  margin: 60rpx 0;
  padding: 5rpx;
  color: rgb(255, 255, 255);
  z-index: 9966;
}

/* pages/mdsyindex/mdsyindex.wxss */
.swiper {
  width: 100%;
  height: 540rpx; /* 设置轮播图的高度，根据需要调整 */
}

.slide-image {
  width: 100%; /* 图片宽度100%填充容器 */
  height: 100%; /* 图片高度100%填充容器 */
}

.gg {
  height: 60rpx;
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中 */
  font-size: 12px; /* 将字体大小设为14px */
  font-family: '宋体', 'SimSun', sans-serif;
  color: rgb(43, 43, 43);
}

.gg_tp {
  margin: 40rpx;
  width: 25rpx;
  height: 25rpx;
}

.xx {
  font-size: 14px; /* 将字体大小设为14px */
}

.xx_tp {
  width: 50rpx;
  height: 50rpx;
}

.xx_text {
  color: rgb(47, 95, 230);
}

.hang1 {
  display: flex; /* 使用Flexbox布局 */
  margin: 30rpx 30rpx 0rpx 30rpx;
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
}

.xx_h1 {
  font-size: 42rpx; /* 将字体大小设为14px */
  font-weight: bold; /* 设置字体加粗 */
}

.xx_h1_dw {
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
  align-items: center;
}

.hang2 {
  display: flex; /* 使用Flexbox布局 */
  margin: 30rpx 30rpx 0rpx 30rpx;
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
}

.xx_h2_dw {
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
}

.xx_h2_text {
  width: 80%;
}

.hang3 {
  display: flex; /* 使用Flexbox布局 */
  margin: 10rpx 0rpx 30rpx 30rpx;
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
  font-size: 12px; /* 将字体大小设为14px */
}

.sq {
  width: 100%;
  height: 260rpx;
  justify-content: center; /* 水平居中 */
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中 */
}

.sq_q {
  width: 100%;
  margin: 30rpx 0;
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-around;
}

.sq_no {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sq_tp_k {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  justify-content: center; /* 水平居中 */
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中 */
}

.sq_tp {
  width: 50rpx;
  height: 50rpx;
}

.sq_text_k {
  margin: 30rpx 0 0 5rpx;
}

.md_js {
  margin: 30rpx 30rpx 30rpx 30rpx;
}

.md_h1 {
  margin-bottom: 30rpx;
  font-size: 22px; /* 将字体大小设为14px */
  font-weight: bold; /* 设置字体加粗 */
}

.md_h2 {
  height: 60rpx;
}

._x {
  width: 40rpx;
  height: 40rpx;
  margin: 40rpx 40rpx 40rpx 670rpx;
}

.modal-mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 9999;
}

.modal-container {
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
  overflow: hidden;
}

.tc_h1 {
  padding: 40rpx;
  font-size: 40rpx;
  font-weight: bold; /* 设置字体加粗 */
  color: rgb(66, 66, 66);
  margin: 0 0 0 35%;
}

.tc_h2 {
  display: flex;
  margin: 0 0 0 32%;
}

.tc_sjdh {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.tc_bohao {
  background-color: #eed3a9;
  color: rgb(143, 102, 56);
  border: none;
  margin: 60rpx 40rpx 200rpx 40rpx;
  border-radius: 10rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tc_h3 {
  display: flex;
  margin: 60rpx 60rpx 60rpx 130rpx;
}

.tc_text_wifi {
  margin-right: 80rpx;
}

.tc_wifi {
  background-color: #eed3a9;
  color: rgb(143, 102, 56);
  height: 70rpx;
  width: 260rpx;
  border-radius: 10rpx;
  margin: 0 0 80rpx 50rpx;
  text-align: center;
  padding-top: 20rpx;
}

.tc_wifi_di {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tc_hj1 {
  padding: 30rpx 30% 30rpx 35%;
}

.tc_hj2 {
  padding: 30rpx 45% 30rpx 45%;
}

.keding {
  background-color: rgb(63, 170, 95);
}

.kdk {
  border: 1rpx solid rgb(63, 170, 95);
}

.kongxianzhong {
  color: rgb(63, 170, 95);
}

.fuwukuang {
  /* margin: 140rpx 20rpx 0rpx 20rpx; */
  padding: 440rpx 20rpx 0 20rpx;
  display: flex;
  align-items: center;
}

.fuwu_kk {
  background-color: rgb(30, 31, 31, 0.5);
  color: rgb(255, 255, 255);
  border-radius: 8rpx;
  margin-right: 10rpx;
  font-size: 25rpx;
  padding: 8rpx;
}
</style>
